<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\url;
?>
<?= Html::cssFile('@web/css/editor.css')?>
<script charset="utf-8" src="kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>-->
<div class="content">
    <div class="box">
        <?php $form=ActiveForm::begin([
            'enableClientValidation'=>true,//是否启用客户端验证
            'method'=>'post',
            'options'=>[
                'enctype'=>'multipart/form-data',
                'class' => 'form-horizontal'
            ],
            'fieldConfig' => [
                'template' => "{label}{input}{error}",
                'labelOptions' => ['class' => 'col-lg-2 control-label'],
            ],

        ]);?>
            <div class="float-l width40">
                <?= $form->field($model,'title')
                         ->textInput(['class'=>'input-text','placeholder'=>'请输入文章标题'])
                         ->label('文章标题：');
                ?>
                <?= $form->field($model,'category')
                         ->dropDownList(
                             $option,
                            ['prompt'=>'请选择类型','class'=>'input-select'])
                         ->label('文章类型：');
                ?>
                <div class="state">
                    <div class="float-l">
                        状态设置：
                    </div>
                    <p class="state-radio state-on" name="2"></p>
                    <p class="lable-p">正常</p>
                    <p class="state-radio state-off" name="3"></p>
                    <p class="lable-p">热点</p>
                    <p class="state-radio state-off" name="1"></p>
                    <p class="lable-p">草稿</p>
                    <?= $form->field($model,'status')
                             ->hiddenInput(['value'=>2,'class'=>'radio',])
                             ->label(false);
                    ?>
                </div>
            </div>
            <div class="float-l width60">
                <div class="padding-t10 float-l">首页图片：</div>
                <div class="float-l">
                    <input type="button" class="add-img"/><br/>
                    <span class="font-s12">建议尺寸484*227 / jpg格式</span>
                </div>
                <?= $form->field($model,'thumbnail')
                         ->fileInput(['class'=>'file-img'])
                         ->label(false);
                ?>
            </div>
                <?= $form->field($model,'content')
                         ->textarea(['name'=>'content','id'=>'editor_id','class'=>'float-l','style'=>'width:1024px; height:500px; margin-top:25px;'])
                         ->label(false);
                ?>
                <!--<textarea id="textarea1" type="text/plain" style="width:1024px;height:500px;"></textarea>-->
            <div class="float-l clear width1024">
                <?= Html::submitButton('确认',['class'=>'submit'])?>
                <a href="<?= Url::to(['/article/index']); ?>" class="undo">取消并返回</a>
            </div>
        <?php ActiveForm::end();?>
    </div>
</div>
<script type="text/javascript">
    //单选框点击样式,这里目前使用面向对象的写法，虽然简单但是过程不好理解，以后将使用foreach遍历的方法
    $('.state-radio').on('click',function(){
        a=$('.radio').val();
        $('.state-radio').removeClass('state-on state-off');
        $('.state-radio').addClass('state-off');
        $(this).removeClass('state-off');
        $(this).addClass('state-on');
        $('.radio').val($(this).attr('name'));
    });
    //首页图片上传按钮
    $('.add-img').click(function(){
        $('.file-img').click();
    });
    //显示缩略图
    $(".file-img").on("change", function(){
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return;
        if (/^image/.test( files[0].type)){
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onloadend = function(){
                $(".add-img").css("background", "url("+this.result+") no-repeat center");
            }
        }
    });
    KindEditor.ready(function(K) {
        window.editor = K.create('#editor_id');
    });
    /*var ue = UE.getEditor('myEditor', {
        toolbars: [
            [
                'fullscreen',
                'source',
                'undo',
                'redo',
                'bold',
                'indent', //首行缩进
                'formatmatch', //格式刷
                'fontsize', //字号
                'paragraph', //段落格式
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'imagecenter', //居中
                'justifyjustify', //两端对齐
                'forecolor', //字体颜色
                'backcolor', //背景色
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'simpleupload', //单图上传
                'insertimage', //多图上传
            ]
        ],
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });*/
    $('.ratings').append('<?= isset($info['rating'])? $info['rating']: '';?>');
    $('.define').append('<?= isset($info['define'])? $info['define']: '';?>');
</script>